<template>
	<view>
		<!-- 处方缴费详情 -->
		<UserInfoCardVue></UserInfoCardVue>
		<view class="pad-16r">
			<view class="start-center">
				<view class="text-center">
					<view class="base-title">就诊信息</view>
					<view class="center">
						<view class="base-bottom"></view>
					</view>
				</view>
			</view>
			<view class="base-item">
				<view>就诊科室</view>
				<view>{{dataSource.deptName}}</view>
			</view>
			<view class="base-item">
				<view>开单时间</view>
				<view>{{dataSource.preTime}}</view>
			</view>
			<view class="base-item">
				<view>就诊院区</view>
				<view>{{currentHospitalInfo.name}}</view>
			</view>
			<view class="base-item" v-if="currentHospitalInfo.address">
				<view>医院地址</view>
				<view>{{currentHospitalInfo.address}}</view>
			</view>
		</view>
		<view class="pad-16r">
			<view class="pre-totalmoney">
				<view>自助开单费用</view>
				<view v-if="this.listPrescription.length>0">
					<view v-if="totalMoney">总金额：<text class="color-red">￥{{totalMoney}}</text></view>
					<view class="flex-end" @click="showProject=!showProject">
						<view v-if="showProject" class="start-center">
							<view>收起</view>
							<u-icon name="arrow-down"></u-icon>
						</view>
						<view v-else class="start-center">
							<view>展开</view>
							<u-icon name="arrow-up"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="pad-16r" v-if="showProject">
				<view class="between-center line-height-50 text-center">
					<view class="item-name">项目名称</view>
					<view class="item-price">单价(元)</view>
					<view class="item-number">数量</view>
					<view class="item-money">金额(元)</view>
				</view>
				<view>
					<view v-for="(item,index) in listPrescription">
						<view class="between-center mar-10-0 pad-10-0 text-center border-bottom-gray">
							<view class="item-name">{{item.feeItemName}}</view>
							<view class="item-price">{{item.unitPrice}}</view>
							<view class="item-number">x{{item.feeItemNum}}</view>
							<view class="item-money">￥{{item.feeItemMoney}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 未支付 -->
			<view v-if="totalMoney>0">
				<view class="start-center">
					<view class="text-center">
						<view class="base-title">就诊信息</view>
						<view class="center">
							<view class="base-bottom"></view>
						</view>
					</view>
				</view>
				<view class="pay-status">
					<view>交易状态</view>
					<view class="start-center no-pay">
						待支付
					</view>
				</view>
				<view class="pay-status">
					<view>商户订单号</view>
					<view>{{dataSource.receiptNo}}</view>
				</view>
				<ButtonAllVue btn-l="取消申请" btn-r="立即支付" @cancel="cancelApply" @click="toPay"></ButtonAllVue>
			</view>
			<!-- 已支付 -->
			<view v-else>
				<view class="start-center">
					<view class="text-center">
						<view class="base-title">就诊信息</view>
						<view class="center">
							<view class="base-bottom"></view>
						</view>
					</view>
				</view>
				<view class="pay-status">
					<view>交易费用</view>
					<view class="color-red">
						￥{{totalMoney}}
					</view>
				</view>
				<view class="pay-status">
					<view>交易状态</view>
					<view class="start-center no-pay">
						支付成功
					</view>
				</view>
				<view class="pay-status">
					<view>支付方式</view>
					<view>
						{{dataSource.payType}}
					</view>
				</view>
				<view class="pay-status">
					<view>商户订单号</view>
					<view>{{dataSource.receiptNo}}</view>
				</view>
				<view class="pay-status">
					<view>交易流水号</view>
					<view>{{dataSource.orderNo}}</view>
				</view>
				<ButtonAllVue btn-l="取消退费" btn-r="立即预约" @cancel="cancelRefund" @click="toReserve"></ButtonAllVue>
			</view>
		</view>
		<LoadVue :load="load"></LoadVue>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		prescriptionSelectHadPayDetail,
		prescriptionSelectNoPayDetail
	} from '../../../api/prescription'
	import UserInfoCardVue from '../../../components/UserInfo/UserInfoCard.vue'
	import ButtonAllVue from '../../../components/Button/ButtonAll.vue'
	export default {
		components: {
			UserInfoCardVue,
			ButtonAllVue,
		},
		computed: {
			...mapGetters(['currentHospitalInfo', "userInfo"])
		},
		data() {
			return {
				dataSource: '',
				totalMoney: '',
				listPrescription: [],
				totalMoney: 0,
				showProject: true,
				load: false,
			}
		},
		onLoad(e) {
			this.dataSource = JSON.parse(e.item)
			this.init()
		},
		methods: {
			init() {
				console.log(this.dataSource)
				this.load = true;
				prescriptionSelectNoPayDetail({
					prePriceId: this.dataSource.preId

				}).then(res => {
					console.log(res)

					res.forEach(item => {
						if (item.feeStatus == '0') {
							this.totalMoney += parseFloat(item.feeItemMoney)
						}
					})
					this.listPrescription = res;
				}).finally(() => {
					this.load = false
				})
			},
			cancelApply() {

			},
			toPay() {

			},
			cancelRefund() {

			},
			toReserve() {

			}
		}
	}
</script>

<style scoped>
	.base-title {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 20px;
		color: #333333;
		/* line-height: 15px; */
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.base-bottom {
		width: 50px;
		height: 5px;
		background-color: rgb(143, 230, 237);
	}

	.base-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 50px;
		border-bottom: 1px solid rgb(202, 204, 206);
		color: #666666;
	}

	.pre-totalmoney {
		height: 50px;
		background-color: rgb(142, 231, 238);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		border-radius: 16rpx 16rpx 0 0;
	}

	.item-name {
		width: 50%;
		text-align: left;
	}

	.item-price {
		width: 20%;
	}

	.item-number {
		width: 10%;
	}

	.item-money {
		width: 20%;
	}

	.pay-status {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 0;
		padding: 10px 0;
		border-bottom: 1px solid rgb(202, 204, 206);
	}

	.no-pay {
		background-color: rgb(142, 231, 238);
		padding: 5px 10px;
		border-radius: 16rpx;
	}
</style>